<template>
	<div class="news_details_view">
		<main class="news_details_main">
			<!-- 顶部区域 -->
			<header class="news_details_header">
				<h1>{{ details.articleTitle }}</h1>
				<div class="avatar">
					<a-avatar>
						{{ details.articleAuthor }}
					</a-avatar>
					<p>{{ details.articleAuthor }}</p>
					<div class="send_time">发布于:{{ sendTime }}</div>
				</div>
			</header>
			<!-- 主体内容 -->
			<section
				class="article_context"
				v-html="details.articleContext"
			></section>
			<section class="support">
				<button
					:class="{ support_btn: true, active: isSupport }"
					@click="support"
				>
					<icon-thumb-up-fill v-if="isSupport" />
					<icon-thumb-up v-else />
					{{ isSupport ? '已点赞' : '点赞' }}
					{{ details.articlesupports }}
				</button>
			</section>
			<section class="commend">
				<div class="content">
					<div class="content_header">
						<h2>最新评论</h2>
						<a @click="changeSort">{{ sortTitle }}</a>
					</div>
					<div class="content_main">
						<a-comment
							v-for="(item, index) in commentList"
							:key="item"
							:author="item.username"
							:datetime="item.sendDate"
						>
							<template #actions>
								<span
									class="action"
									key="heart"
									@click="setCommentSupport(item._id, index)"
								>
									<icon-thumb-up-fill v-if="item.isSupport" />
									<icon-thumb-up v-else />
									{{ item.SupportNum || 0 }}
								</span>
							</template>
							<template #avatar>
								<a-avatar
									:imageUrl="item.users[0].userAvatar"
									v-if="item.users[0].userAvatar"
									@click="goUserSpace(item.user_id)"
								></a-avatar>
								<a-avatar
									@click="goUserSpace(item.user_id)"
									v-else
									>{{ item.username }}</a-avatar
								>
							</template>
							<template #content>
								<p class="comment_text">{{ item.context }}</p>
							</template>
						</a-comment>
						<a-empty v-if="commentList.length < 1">
							<template #image> <icon-pen /> </template>
							该文章暂未有评论 快来发布第一条评论吧!
						</a-empty>
					</div>
					<a-textarea
						placeholder="发表您的评论吧!"
						v-model="commendText"
						:max-length="{ length: 150, errorOnly: true }"
						allow-clear
						show-word-limit
						:disabled="!isLogined"
					/>
					<a-button
						:status="buttonStatus"
						@click="sendCommend"
						:disabled="buttonDisabled || !isLogined"
						>{{ !isLogined ? '未登录' : '发表' }}
					</a-button>
				</div>
			</section>
		</main>
		<aside>
			<rank-List
				v-if="newsList.length > 1"
				:rankList="newsList"
				:itemTitle="articleTitle"
				:detailsUrl="/newsDetails/"
			>
				<template #title>
					<h2 class="rank_title">热门资讯</h2>
				</template>
			</rank-List>
		</aside>
	</div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import newsApi from '../../api/news'
import movieApi from '../../api/movie'
import isLogin from '../../utils/isLogin'
const route = useRoute(),
	newsId = route.params.id,
	details = ref({
		articleTitle: '',
		articleContext: ''
	}),
	commentList = ref([]),
	sortTitle = ref('升序  ↑'),
	commendText = ref(''),
	buttonStatus = ref('success'),
	buttonDisabled = ref(false),
	isLogined = isLogin(),
	isSupport = ref(false),
	router = useRouter()
const newsList = ref([])
const articleTitle = ref('articleTitle')
newsApi.showRank().then(res => {
	newsList.value = res
})
// 获取对应id的文章内容
newsApi
	.getNewsDetails(newsId)
	.then(result => {
		details.value = result
		if (isLogin()) {
			newsApi.getNewsSupport(newsId).then(res => {
				isSupport.value = res
			})
		}
	})
	.catch(err => {
		console.log(err)
	})
const sendTime = computed(() => {
	return movieApi.transformDate(details.value.articleTime)
})
// 设置文章点赞
function support() {
	if (!isLogin()) {
		AMessage.error('未登录!请登录')
		return router.push('/login')
	}
	newsApi.setNewsSupport(newsId).then(res => {
		AMessage.success(res.message)
		isSupport.value = res.message === '取消点赞' ? false : true
		res.message === '取消点赞'
			? details.value.articlesupports--
			: details.value.articlesupports++
	})
}
// 获取评论内容
function getCommendList() {
	newsApi.getNewsComment(newsId).then(res => {
		res.sort((a, b) => {
			return a.sendDate - b.sendDate
		}).forEach(x => {
			x.sendDate = movieApi.transformDate(x.sendDate)
		})
		commentList.value = res
	})
}
getCommendList()
// 设置评论点赞
function setCommentSupport(id, index) {
	console.log(index)
	if (!isLogin()) {
		AMessage.error('未登录!请登录')
		return router.push('/login')
	}
	newsApi.setNewsCommentSupport(id).then(res => {
		AMessage.success(res.message)
		commentList.value[index].isSupport =
			res.message === '取消点赞' ? false : true
		res.message === '取消点赞'
			? commentList.value[index].SupportNum--
			: commentList.value[index].SupportNum++
	})
}
// 修改排序
function changeSort() {
	if (sortTitle.value === '升序  ↑') {
		sortTitle.value = '降序  ↓'
		commentList.value.sort((a, b) => {
			return Date.parse(b.sendDate) - Date.parse(a.sendDate)
		})
	} else {
		sortTitle.value = '升序  ↑'
		commentList.value.sort((a, b) => {
			return Date.parse(a.sendDate) - Date.parse(b.sendDate)
		})
	}
}
// 前往个人空间
function goUserSpace(id) {
	router.push(`/userSpace/${id}`)
}
// 添加评论
function sendCommend() {
	if (commendText.value !== '') {
		newsApi
			.setNewsComment(
				newsId,
				details.value.articleTitle,
				commendText.value
			)
			.then(() => {
				commendText.value = ''
				getCommendList()
			})
	} else {
		AMessage.error('评论为空!')
	}
}
// 监听评论长度
watch(
	() => commendText,
	() => {
		if (commendText.value.length > 150) {
			buttonStatus.value = 'danger'
			buttonDisabled.value = true
		} else {
			buttonStatus.value = 'success'
			buttonDisabled.value = false
		}
	},
	{
		deep: true
	}
)
</script>

<style lang="scss" scoped>
.news_details_view {
	width: 1280px;
	min-width: 1280px;
	margin: 0 auto;
	display: flex;
	color: var(--fc-bg);
	// 新闻详情主体
	.news_details_main {
		display: flex;
		flex: 1;
		min-width: 0;
		flex-direction: column;
		gap: var(--normal-distance);
		padding: calc(var(--normal-distance) * 2);
		margin-right: 8rem;
		background-color: var(--main-2-bg);
		.news_details_header > .avatar {
			flex: 1;
			min-width: 0;
			display: flex;
			align-items: center;
			gap: var(--normal-distance);
			.send_time {
				margin-left: auto;
			}
		}
		.article_context {
			flex: 1;
			min-width: 0;
			:deep(p) {
				font-size: var(--normal-distance);
				color: var(--fc-bg) !important;
			}
			:deep(p + p) {
				margin-top: var(--normal-distance);
			}
			:deep(p > img) {
				width: 100% !important;
				height: 100% !important;
			}
			:deep(span) {
				background: none !important;
				margin-top: var(--normal-distance);
				color: var(--fc-bg) !important;
			}
		}
		.support {
			flex: 1;
			min-width: 0;
			display: flex;
			justify-content: center;
			.support_btn {
				width: 6rem;
				height: 2rem;
				line-height: 2rem;
				color: #ecf0f1;
				background-color: rgba($color: #e67e22, $alpha: 0.3);
				border: none;
				border-radius: 10px;
				cursor: pointer;
			}
			.support_btn:hover {
				color: #2c3e50;
				background-color: rgba($color: #e67e22, $alpha: 1);
			}
			.active {
				background-color: rgba($color: #e67e22, $alpha: 1);
				color: black;
			}
		}
		// 评论区样式
		.content {
			display: flex;
			flex-direction: column;
			gap: var(--normal-distance);

			.content_header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: var(--normal-distance);
				background-color: var(--ti-bg);
				border-left: 10px solid var(--br-bg);
				color: var(--fc-bg);

				a {
					margin-top: 0;
					margin-right: var(--normal-distance);
					cursor: pointer;
					color: var(--fc-bg);
				}

				a:hover {
					color: #2d3436;
				}
			}
			:deep(.arco-textarea-wrapper) {
				background-color: var(--main-bg);
			}
			.content_main {
				.comment_text {
					width: 500px;
					word-break: break-all;
				}
			}
		}
	}
	aside {
		width: 300px;
		height: 550px;
		background-color: var(--main-2-bg);
		.rank_title {
			color: brown;
			margin-left: var(--normal-distance);
		}
	}
}
:deep(.arco-comment-author),
:deep(.arco-comment-content),
:deep(.arco-comment-actions) {
	color: var(--fc-bg);
}
</style>
